ion-view(title='Aya')
    ion-content(has-header='true')
        div(ng-switch='progress.status')
            .card.text-center(ng-switch-default)
                    .item.item-body
                        i.icon.placeholder-icon.ion-loading-c.icon-large

            .card.list(ng-switch-when='ready')
                .item.item-text-wrap
                    small
                        a.subdued(href='#') Juz {{ aya.juz_id }}
                        a.subdued(href='#') {{ aya.sura_name }}
                        a.subdued(ui-sref='reader({ current: {{ aya.page_id }} })') Aya {{ aya.aya_id }}
                        .aya.single-aya
                            span.aya-text(colorize='{{ options.reader.colorized }}', colorize-text='{{ aya.text }}')
                            i.aya-number {{ aya.aya_id_display }}

                a.item.item-text-wrap.subdued(href='#', auto-direction='', ng-if='aya.topic.length > 0'): small الموضوع: {{ aya.topic }}
                .item.tabs.tabs-secondary.tabs-icon-left
                    a.tab-item
                        i.icon.ion-bookmark
                        | Bookmark
                    a.tab-item
                        i.icon.ion-pricetag
                        | Tag

                    audio(ng-if='options.audio.enabled', media-player='ayaPlayer')
                        source(ng-src='{{ aya.recitation.src }}', type='{{ aya.recitation.type }}')

                    a.tab-item(ng-if='options.audio.enabled && online && !ayaPlayer.playing', ng-click='ayaPlayer.play()')
                        i.icon.ion-volume-medium
                        | Listen
                    a.tab-item(ng-if='ayaPlayer.playing', ng-click='ayaPlayer.pause()')
                        i.icon.ion-pause
                        | Pause

            .card.list(ng-repeat='explanation in aya.explanations')
                .item.item-text-wrap.item-divider(auto-direction='') {{ explanation.localizedName }}
                .item.item-text-wrap.translation(dir='{{ explanation.direction }}') {{ explanation.text }}
                .item.tabs.tabs-secondary.tabs-icon-left
                    a.tab-item
                        i.icon.ion-share
                        | Share
                    a.tab-item
                        i.icon.ion-ios7-copy-outline
                        | Copy